<template>
    <div class="style_all">
        <el-row class="colStyle">
            <el-col :span="3">
                <div style="padding-top: 14%;">
                    <el-avatar>
                        <img src="../../assets/picture/person.png">
                    </el-avatar>
                </div>
            </el-col>
            <el-col :span="5">
                <div class="nameStyle">
                    <p style="font-size: 26px">{{username}}</p>
                    <el-button type="info" plain size="mini" style="height: 20%;margin:auto" @click="showPersonDialog">
                        编辑资料<i
                            class="el-icon-edit el-icon--right"></i></el-button>
                </div>
            </el-col>
        </el-row>
        <el-row class="colStyle2">
            <el-col :span="24">
                <el-menu :default-active="activeIndex"
                         :router="true"
                         class="el-menu-demo"
                         mode="horizontal"
                         background-color="#fffdef"
                         active-text-color="#FF6666"
                         text-color="black">
                    <el-menu-item index="/personal">账户中心</el-menu-item>
                    <el-menu-item index="/healthCode">我的健康码</el-menu-item>
                    <el-menu-item index="/MyTemperature">体温登记</el-menu-item>
                    <el-menu-item index="/application">我的申请</el-menu-item>
                    <el-menu-item index="/ceshi">处理中心</el-menu-item>
                </el-menu>
            </el-col>
        </el-row>
        <el-row class="colStyle3" style="background-color: #ffffff;height: 65%">
            <el-col :span="24">
                <div>
                    <main>
                        <router-view></router-view>
                    </main>
                </div>
            </el-col>
        </el-row>


        <!--展示完善有信息页面-->
        <el-dialog title="编辑个人信息" :visible.sync="PersonDialog" width="45%" @colse="PersonDialogClosed" center>
            <el-form ref="personFormRef" :model="personForm" label-width="90px" size="mini">
                <el-form-item label="用户名:" prop="uname" :rules="rules.uname">
                    <el-input type="text" v-model="personForm.uname" disabled></el-input>
                </el-form-item>
                <el-form-item label="密码:" prop="password" :rules="rules.password">
                    <el-input type="text" v-model="personForm.password"></el-input>
                </el-form-item>
                <el-form-item label="年龄:" prop="age" :rules="rules.age">
                    <el-input v-model="personForm.age"></el-input>
                </el-form-item>
                <el-form-item label="性别:" prop="sex" :rules="rules.sex">
                    <el-input v-model="personForm.sex"></el-input>
                </el-form-item>
                <el-form-item label="电话:" prop="tel" :rules="rules.tel">
                    <el-input v-model="personForm.tel"></el-input>
                </el-form-item>
                <el-form-item label="地址:" prop="address" :rules="rules.address">
                    <el-input v-model="personForm.address"></el-input>
                </el-form-item>
                <el-form-item label="健康状况:" prop="health">
                    <el-input v-model="personForm.health" disabled></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
        <el-button @click="PersonDialog = false">取 消</el-button>
        <el-button type="primary" @click="personInfo">确 定</el-button>
      </span>
        </el-dialog>
    </div>
</template>

<script>
    export default {
        name: "personal",
        data() {
            return {
                activeIndex: "1",
                username: null,
                password: '',
                userID: "",
                token: "",
                PersonDialog: false,
                personForm: {
                    uname: "",
                    address: "",
                    sex: "",
                    age: "",
                    tel: "",
                    health: "",
                },

                rules: {
                    uname: [{required: true,message: '用户名为必填项', trigger: 'blur'}, {
                        min: 2,
                        max: 8,
                        message: '长度在 2 到 8 个字符',
                        trigger: 'blur'
                    }],
                    password: [{required: true,message: '密码为必填项', trigger: 'blur'}, {
                        min: 2,
                        max: 8,
                        message: '长度在 2 到 8 个字符',
                        trigger: 'blur'
                    }],
                    address: [{required: true,message: '地址为必填项', trigger: 'blur'}],
                    sex: [{required: true,message: '性别为必填项', trigger: 'blur'}, {
                        min: 1,
                        max: 1,
                        message: '长度为1个字符',
                        trigger: 'blur'
                    }],
                    age: [{required: true,message: '年龄为必填项', trigger: 'blur'}],
                    tel: [{required: true,message: '电话为必填项', trigger: 'blur'}, {
                        min: 2,
                        max: 11,
                        message: '长度在 2 到 11 个字符',
                        trigger: 'blur'
                    }],

                },
            }
        },
        created() {
            this.userID = window.sessionStorage.getItem('UUID')
            this.username = window.sessionStorage.getItem('username')
            this.password = window.sessionStorage.getItem('password')
            this.token = window.sessionStorage.getItem('token')
        },
        methods: {
            async showPersonDialog() {
                console.log(this.userID)
                const {data: res} = await this.$http.get("getUserByUUID?UUID=" + this.userID);
                this.personForm = res;
                this.PersonDialog = true;
            },
            personInfo() {
                console.log(this.personForm)
                this.$refs.personFormRef.validate(async valid => {
                    console.log(valid + "****", this.personForm);
                    if (!valid) return;
                    // 发起请求
                    const {data: res} = await this.$http.post("editUserInfo", this.personForm);
                    console.log(res);
                    if (res.flag !== "ok") return this.$message.error("操作失败！！！");
                    this.$message.success("操作成功！！！");
                    //隐藏
                    this.PersonDialog = false;
                    /*刷新当前页面*/
                    this.$router.go(0)
                });
            },
            PersonDialogClosed() {
                this.$refs.personFormRef.resetFields();
            },
        }
    }
</script>

<style scoped>
    .style_all {
        height: 100%;
        /*background-image: url("../../assets/picture/bjtp.png");*/
    }

    .colStyle {
        background-color: #fffdef;
        width: 80%;
        /*position: absolute;*/
        padding-top: 1%;
        left: 50%;
        -webkit-transform: translateX(-50%);
        transform: translateX(-50%);
    }

    .colStyle2 {
        width: 80%;
        /*padding-top: 12%;*/
        left: 50%;
        -webkit-transform: translateX(-50%);
        transform: translateX(-50%);
    }

    .colStyle3 {
        width: 80%;
        left: 50%;
        -webkit-transform: translateX(-50%);
        transform: translateX(-50%);
    }

    .nameStyle {
        display: flex;
        /*margin: 0 auto;*/
        /* padding-top: 2%;*/
        /*padding-bottom: 20%;*/
        padding-left: 8%;
    }


    .el-avatar {
        display: flex;
        width: 100px;
        height: 100px;
        background-color: #60adf8;
        margin: 0 10%;
        /*居中*/
        /*margin: 0 auto;*/

        /*margin（1）一个参数值，将用于全部的四边。
        （2）两个参数值，第一个用于上－下，第二个用于左－右。
        （3）三个参数值，第一个用于上，第二个用于左－右，第三个用于下。
        （4）四个参数值，将按上－右－下－左的顺序作用于四边。
        CSS 居中实现。那可以这么写：margin:0 auto ;
        margin后面如果只有两个参数的话，第一个表示top和bottom，第二个表示left和right
        因为0 auto，表示上下边界为0，左右则根据宽度自适应相同值（即居中..
        */
    }
</style>